<template>
  <div class="list">
    <!-- 组件=> -->
    <div class="left">
      <div class="title">巅峰榜</div>

      <div
        class="left-item"
        v-for="(item, index) in recommendMusicL"
        :key="item.id"
      >
        <span class="music-name">{{ index + 1 }}.{{ item.name }}</span>
        -
        <span class="music-author">{{ item.song.album.artists[0].name }}</span>
      </div>
    </div>
    <div class="right">
      <img :src="pic" alt="" />
    </div>
  </div>
</template>

<script>
import { RecommendMusics } from "@/http/api/music.js";
export default {
  name: "ListItem",
  data() {
    return {
      recommendMusicL: [],
      pic: "",
    };
  },
  // 接收数据
  created() {
    RecommendMusics("/personalized/newsong", { limit: 6 }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        this.recommendMusicL = res.result.slice(0, 3); //获取推荐的数据[{},{}
        this.pic = res.result[0].picUrl;
      }
    });
  },
};
</script>

<style scoped lang="less">
.list {
  display: flex;
  border-radius: 50px;
  overflow: hidden;
  .left {
    flex: 1;
    padding: 0.75rem 0.55rem 0;
    background: rgb(242, 242, 242);
    .title {
      font-weight: 500;
      margin-bottom: 0.75rem;
    }
  }
  .right {
    img {
      height: 9.375rem;
    }
  }
}
.left {
  color: #444;
  display: flex;
  flex-direction: column;
}
.music-name {
  color: #333;
  font-weight: bold;
}
.left-item {
  flex: 1;
  font-size: 0.85rem;
  color: #999;
}
</style>